<template>
    <div class="user-info">
        <basic-container>
            <el-form ref="form"
                     :model="form"
                     :rules="rules"
                     label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户名"
                                      prop="realName">
                            <el-input v-model="form.realName"
                                      placeholder="请输入姓名"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="所属部門"
                                      prop="deptId">
                            <el-input v-model="form.deptName"
                                      placeholder="请输入姓名" disabled/>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="身份证号"
                                      prop="idCard">
                            <el-input v-model="form.idCard"
                                      :maxlength="18"
                                      placeholder="请输入身份证号"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户电话"
                                      prop="phone">
                            <el-input v-model="form.phone"
                                      placeholder="请输入电话"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户性别">
                            <el-radio-group v-model="form.sex">
                                <el-radio v-for="dict in sexOptions"
                                          :key="dict.dictValue"
                                          :label="dict.dictValue">{{dict.dictLabel}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="用户年龄"
                                      prop="age">
                            <el-input v-model="form.age"
                                      placeholder="请输入年龄"/>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="登录账号"
                              prop="account">
                    <el-input v-model="form.account"
                              placeholder="请输入登录账号" disabled/>
                </el-form-item>

                <el-form-item label="登录密码"
                              prop="password">
                    <el-input type="password"
                              v-model="form.password"
                              placeholder="请输入登录密码"/>
                </el-form-item>

            </el-form>
            <div align="center">
                <el-button type="primary"
                           @click="submitForm">确 定
                </el-button>
                <el-button @click="cancel">清 除</el-button>
            </div>
        </basic-container>

    </div>
</template>
<script>
    import {mapGetters} from "vuex";
    import {updateCurrentUser} from "@/api/system/user";

    export default {
        computed: {
            ...mapGetters(["userInfo"])
        },
        data() {
            return {
                sexOptions: [],
                form: {},
                // 表单校验
                rules: {
                    realName: [
                        {required: true, message: "姓名不能为空", trigger: "blur"}
                    ],
                    sex: [
                        {required: true, message: "性别不能为空", trigger: "blur"}
                    ],
                    idCard: [
                        {required: true, message: "身份证号不能为空", trigger: "blur"},
                        {
                            validator: (rule, value, callback) => {
                                if (value) {
                                    if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
                                        callback(new Error("请输入正确的号码！"));
                                    } else {
                                        callback();
                                    }
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    age: [
                        {required: true, message: "年龄不能为空", trigger: "blur"},
                        {
                            validator: (rule, value, callback) => {
                                if (value) {
                                    if (!/(^[1-9]\d*$)/.test(value)) {
                                        callback(new Error("请输入大于零的正整数值"));
                                    } else {
                                        callback();
                                    }
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    phone: [
                        {required: true, message: "电话不能为空", trigger: "blur"},
                        {
                            validator: (rule, value, callback) => {
                                if (value) {
                                    if (!/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value)) {
                                        callback(new Error("请输入正确的电话号码！"));
                                    } else {
                                        callback();
                                    }
                                } else {
                                    callback();
                                }
                            },
                            trigger: "blur"
                        }
                    ],
                    account: [
                        {required: true, message: "登录账号不能为空", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "登录密码不能为空", trigger: "blur"}
                    ],
                }
            };
        },
        created() {
            let user = JSON.parse(JSON.stringify(this.userInfo));
            user.sex = user.sex + "";
            this.form = user;
            this.getDicts("sys_sex").then(response => {
                this.sexOptions = response.data.data;
            });
        },
        methods: {
            submitForm() {
                this.$confirm('是否确认修改当前登录用户信息?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return updateCurrentUser(this.form);
                }).then(() => {
                    this.msgSuccess("修改成功,重新登录后生效！");
                }).catch(function () {
                });
            },
            cancel() {
                let user = JSON.parse(JSON.stringify(this.userInfo));
                user.sex = user.sex + "";
                this.form = user;
            }
        }
    };
</script>

<style lang="scss">
</style>
